<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>4.3 幻灯片的核心部分</title>
    <link rel="stylesheet" href="css/slider.css">
</head>
<body>
    <div id="slider" class="slider">
        <div class="slider-item-container">
            <div class="slider-item">
                <a href="###" class="slider-link">
                    <img src="img/1.jpg" alt="slider" class="slider-img">
                </a>
            </div>
            <div class="slider-item">
                <a href="###" class="slider-link">
                    <img src="img/2.jpg" alt="slider" class="slider-img">
                </a>
            </div>
            <div class="slider-item">
                <a href="###" class="slider-link">
                    <img src="img/3.jpg" alt="slider" class="slider-img">
                </a>
            </div>
            <div class="slider-item">
                <a href="###" class="slider-link">
                    <img src="img/4.jpg" alt="slider" class="slider-img">
                </a>
            </div>
            <div class="slider-item">
                <a href="###" class="slider-link">
                    <img src="img/5.jpg" alt="slider" class="slider-img">
                </a>
            </div>
        </div>
        <!-- <div class="slider-indicator-container">
            <span class="slider-indicator"></span>
            <span class="slider-indicator"></span>
            <span class="slider-indicator"></span>
            <span class="slider-indicator"></span>
            <span class="slider-indicator"></span>
        </div> -->
    </div>

    <button id="prev">prev</button>
    <button id="next">next</button>

    <script src="js/slider.js"></script>
    <!-- <script>
        function Slider(el, options) {
            // 处理参数，优先使用用户传递的参数，没传的使用默认参数
            var defaults = {
                initIndex: 0,
                speed: 300,
                hasIndicator: false
            };
            // 实际使用的参数
            this.options = {};
            this.options.initIndex = typeof options.initIndex !== 'undefined' ? options.initIndex : defaults.initIndex;
            this.options.speed = typeof options.speed !== 'undefined' ? options.speed : defaults.speed;
            this.options.hasIndicator = typeof options.hasIndicator !== 'undefined' ? options.hasIndicator : defaults.hasIndicator;

            this.el = el;
            this.itemContainer = el.querySelector('.slider-item-container');
            this.items = this.itemContainer.children;
            // 每次切换的距离(一张幻灯片的宽度)
            this.distancePerSlide = this.items[0].offsetWidth;

            // 索引
            this.minIndex = 0;
            this.maxIndex = this.items.length - 1;
            // this.index = this.options.initIndex;
            this.index = this._adjustIndex(this.options.initIndex);

            // 移动到指定索引
            this.move(this.getDistanceByIndex(this.index));

            // 是否需要指示器indicator
            if (this.options.hasIndicator) {
                this._createIndicators();
                this._setIndicatorActive(this.index);
            }
        }
        // 切换到指定索引的幻灯片
        Slider.prototype.to = function (index) {
            this.index = index;

            this._setTransitionSpeed(this.options.speed);
            this.move(this.getDistanceByIndex(this.index));

            var self = this;
            this.itemContainer.addEventListener('transitionend', function () {
                // self._setTransitionSpeed(0);
            }, false);

            if (this.options.hasIndicator) {
                this._setIndicatorActive(this.index);
            }
        };
        Slider.prototype._setTransitionSpeed = function (speed) {
            this.itemContainer.style.transitionDuration = speed + 'ms';
        };
        // 切换到上一张幻灯片
        Slider.prototype.prev = function () {
            this.to(this.index - 1);
        };
        // 切换到下一张幻灯片
        Slider.prototype.next = function () {
            this.to(this.index + 1);
        };
        // 修正索引值，让它保持在最小和最大索引值之间
        Slider.prototype._adjustIndex = function (index) {
            if (index < this.minIndex) {
                index = this.minIndex;
            } else if (index > this.maxIndex) {
                index = maxIndex;
            }

            return index;
        };
        Slider.prototype.move = function (distance) {
            this.itemContainer.style.transform = 'translate3d(' + distance + 'px, 0, 0)';
        };
        Slider.prototype.getDistanceByIndex = function (index) {
            return -index * this.distancePerSlide;
        };
        Slider.prototype._createIndicators = function () {
            var indicatorContainer = document.createElement('div');
            var html = '';

            indicatorContainer.className = 'slider-indicator-container';
            for (var i = 0; i <= this.maxIndex; i++) {
                html += '<span class="slider-indicator"></span>';
            }
            indicatorContainer.innerHTML = html;
            this.el.appendChild(indicatorContainer);
        };
        Slider.prototype._setIndicatorActive = function (index) {
            this.indicators = this.indicators || this.el.querySelectorAll('.slider-indicator');
            for (var i = 0; i < this.indicators.length; i++) {
                this.indicators[i].classList.remove('slider-indicator-active');
            }

            this.indicators[index].classList.add('slider-indicator-active');
        };
    </script> -->
    <script>
        var slider = new Slider(document.getElementById('slider'), {
            initIndex: 0, // 初始显示第几张幻灯片，从0开始
            speed: 300, // 幻灯片的切换速度
            hasIndicator: true // 是否需要指示器indicator
        });

        document.getElementById('prev').addEventListener('click', function () {
            // 切换上一张幻灯片
            slider.prev();
        }, false);
        document.getElementById('next').addEventListener('click', function () {
            // 切换下一张幻灯片
            slider.next();
        }, false);
    </script>
</body>
</html>